<template>
  <div class="register font26">
    <top-nav :breadName="breadName"></top-nav>
    <div class="z-form">
      <div class="z-form-item">
          <z-input placeholder="请输入手机号" icon="icon-gerenzhongxin"/>
      </div>
      <div class="z-form-item">
          <z-input placeholder="请输入密码" inputType="password" icon="icon-gerenzhongxin"/>
      </div>
      <div class="z-form-item">
          <z-input placeholder="请输入密码" inputType="password" icon="icon-gerenzhongxin"/>
      </div>
      <div class="z-form-item">
          <z-input placeholder="请输入密码" inputType="password" icon="icon-gerenzhongxin"/>
      </div>
      <div class="z-form-item">
          <z-input placeholder="请输入密码" inputType="password" icon="icon-gerenzhongxin"/>
      </div>
    </div>
    <mt-button class="login-btn primary-bg font36" type="primary" @click="register">立即注册</mt-button>
    <p class="font-999">登陆即同意<span class="primary">《用户协议》</span>和<span class="primary">《隐私政策》</span></p>
  </div>
</template>


<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { showToast } from '@/utils/project';
import TopNav from '@/components/project/nav/topNav.vue';
import zInput from '@/components/project/input/index.vue';
@Component({
    components: {
        zInput,
        TopNav,
    },
})
export default class Register extends Vue {
  // 当前页面的名称
  private breadName: string = '注册';
  /**
   * 注册账户
   */
  private register() {
    this.goBack();
  }
  /**
   * 返回登陆页
   */
  private goBack() {
    this.$router.back();
  }
}
</script>
<style lang="scss" scoped>
.register {
  width: 100%;
  .z-form {
    width: 100%;
    margin-top: 113px;
    margin-bottom: 150px;
    padding: 0 66px;
    .z-form-item {
        margin: 0 auto;
        margin-bottom: 28px;
    }
    .z-form-item:last-of-type {
        margin-bottom: 0;
    }
  }
  .login-btn {
      width: calc(100% - 132px);
      height: 81px;
      border-radius: 40px;
      color: #fff;
      border: none;
  }
  .font-999 {
    margin-top: 30px;
  }
}
</style>

